import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { StorageService } from '../sevices/storage.service';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
  public hasTel = false;

  // 手机号判断的正则表达式
  public TEL_REGEXP = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
  // 获取输入的手机号
  public tel: any;
  // 获取输入的验证码
  public code: any;
  // 点击获取验证码显示已发送
  public hadPost = false;
  // 获取显示手机号错误
  public telWrong: any = '';
  // 登录失败时显示错误
  public codeWrong: any = '';
  // 获取验证码按钮是否可点的开关
  public getclick = false;
  public get: any = '获取验证码';
  // 获取验证码按钮颜色
  public canGet = true;
  // 绑定成功
  public allRight = false;

  constructor(
    public http: HttpClient,
    private storage: StorageService
  ) { }

  ngOnInit() {
  }

  // 检验手机号是否正确是真的手机
  vertel(e: any) {
    this.tel = e.target.value;
    if (this.tel) {
      if (!(this.TEL_REGEXP.test(this.tel))) {
        this.telWrong = '×手机号不正确，我估计这不是你的号码×';
      } else {
        this.hasTel = true;
        this.telWrong = '';
      }
    } else {
      this.telWrong = '×手机号不正确，我估计这不是你的号码×';
    }
  }

  // 获取验证码
  getCode(e: any) {
    let time = 60;
    if (!this.hasTel) {
      this.telWrong = '×手机号不正确，我估计这不是你的号码×';
    } else {
      // 获取成功按钮变灰
      this.canGet = false;
      const url: any = 'http://192.168.2.228:8080/user/sendpin';
      const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' })};
      this.http.post(url, { u_tel: this.tel }, httpOptions).subscribe((response: any) => {
      alert(response.data);
    });
      // 关闭获取验证码按钮
      this.getclick = true;
      // 倒计时剩余时间
      const djs = setInterval(() => {
        this.get = '已发送（' + time + ')';
        time--;
        // 倒计时结束，开启获取验证码按钮
        if (time === -2) {
          clearInterval(djs);
          this.getclick = false;
          this.get = '重新获取';
          this.canGet = true;
        }
      }, 1000);

      // 显示已发送验证码
      this.hadPost = true;
      setTimeout(() => {
        this.hadPost = false;
      }, 3000);
    }
  }

  // 获取输入的验证码
  getInputCode(e: any) {
    this.code = e.target.value;
  }

  // 检验验证码并绑定
  register() {
    const url: any = 'http://192.168.2.228:8080/user/login';
    const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' })};
    if (this.code) {
      this.codeWrong = '';
      this.http.post(url, {u_tel: this.tel, u_cheaknumber: this.code}, httpOptions).subscribe((response: any) => {
        if (response.message === '验证码错误或已失效') {
          this.codeWrong = '验证失败，请检查手机号或者验证码是否正确';
        } else {
          // 将用户信息存入本地
          this.storage.setItem('user', response.data);
          this.allRight = true;
          // 绑定成功后返回上一个页面
          setTimeout(() => {
            window.history.go(-1);
          }, 2000);
        }
      });
    } else {
      this.codeWrong = '请获取并输入验证码';
    }
  }
}
